<template>
    <div>
        <x-header style="margin:0;">考情详情</x-header>
        <div class="search" >
            <input class="search_box"  placeholder="搜索" v-model="search_msg"/>
            <input class="search_btn" type="submit" value="搜索" @click="search">
        </div>
        <div id="show_all_teacheres">
            <ul>
                <li  v-for="(item,key) in allinfo" class="all_teacheres">
                        <img style="width:41px;height:41px;border-radius:20.5px;" :src="item.avatar" alt="">
                        <span class="t_name">{{item.name}}</span>
                        <span class="t_mobile">{{item.mobile}}</span>
                        <span class="t_email">{{item.email}}</span>
                        <span v-show="item.state==='未签到'" style="background:#FFD658 " class="t_state">{{item.state}}</span>
                        <span v-show="item.state==='签到'" style="background:#8ED1F3  " class="t_state">{{item.state}}</span>
                        <span v-show="item.state==='请假'" style="background:#E0E0E0 " class="t_state">{{item.state}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { XHeader,Flexbox,XInput, FlexboxItem,XButton} from 'vux'
import { mapActions } from 'vuex';
export default {
    data() {
        return {
            type:0,
            search_msg:'',
            subclassid:this.$route.query.subclassid,
        }
    },
    created(){
        this.init()
        console.log(this.allinfo)
        console.log('subclassid'+ this.subclassid)
    },    
     computed:{
        allinfo(){
            return this.$store.state.user.classattendencedetail
        }
    },
    components:{
        XHeader,
        Flexbox, 
        FlexboxItem,
        XInput,
        XButton
    },
    methods:{
        ...mapActions({
            getUserInfo:'getUserInfo'
        }),
        init(){
                var all = {
                    "subclassid":this.subclassid,
                    "type":0,
                    "search":''
                }
                console.log(all)
                this.getUserInfo({vue: this,subclassid:this.subclassid,type:this.type,search:''}).then(rs => {
                        console.log("getUserInfo")
                    }).catch(error => {
                        console.log(error)
                    })
        },
        search(){
             this.getUserInfo({vue: this,subclassid:this.subclassid,type:this.type,search:this.search_msg}).then(rs => {
                console.log("searchClassUsers",this.type)
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>

<style scoped>
    input::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #BDBDBD ;
    font-size: 12px;
    } 

    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 

    input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #BDBDBD ; 
    font-size: 12px;
    } 
   .search{
       height:50px;
       margin:0;
       padding-top:7.5px;
   }
   .search_box{
       width:80%;
       height:32.5px;
       margin:0 0 10px 15px;
       padding:0;
       box-shadow:0 0  20px #EEEEEE;
       border-radius:5px;
       border: 0;
       background: url(../asset/images/magnifier.png) 10px 9px no-repeat;
       background-size: 14px 14px;
       padding-left:30px;
       outline: none;
   }
   .search_btn{
        width: 10%;
        height: 26.5px;
        background: 0;
        border: 0;
        color: #F25257;
        margin: 0px 10px 0px 0px;
        float: right;
        outline: none;
        margin-top: 5px;
        font-size: 14px;
        font-family: PingFangSC-Regular;;
   }
   .all_teacheres {
       position: relative;
       height:66px;
       margin-left: 17.5px;
       /* padding-top:10px;
       padding-bottom: 15px; */
   }
    .all_teacheres  img{
       position: absolute;
       top:10px;
   }
    .t_name{
       position: absolute;
       left:20%;
       top:23px;
       font-size:14px; 
       font-family: PingFangSC-Regular
   }
   .t_email{
       position: absolute;
       left:40%;
       top:23px;
       color:#A5A5A5 ;
       font-size:12px; 
       font-family: PingFangSC-Regular
   }
    .t_mobile{
       position: absolute;
       left:40%;
       top:43px;
       color:#A5A5A5 ;
       font-size:12px; 
       font-family: PingFangSC-Regular
   }
   .t_state{
        width:38px;
        padding:1px 2.5px;
        height:15px;
        position:absolute;
        left:83%;
        top:23px;
        font-family: PingFangSC-Light;
        font-size: 11px;
        color:#FFFFFF;
        background: #A5A5A5;
        line-height: 15px;
        text-align: center
   }
</style>
